<template>
  <div class="app-container">
    <el-card class="ad-list-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="广告列表" name="advert">
          <AdvertList v-if="activeName === 'advert'" />
        </el-tab-pane>
        <el-tab-pane label="广告弹窗" name="popup">
          <AdvertPopup v-if="activeName === 'popup'" />
        </el-tab-pane>
        <el-tab-pane label="广告位置" name="place">
          <AdvertPlace v-if="activeName === 'place'" />
        </el-tab-pane>
      </el-tabs>
      <el-button
        v-if="activeName !== 'place'"
        type="primary"
        class="ad-list-container-button"
        @click="addClickHandle"
      >
        {{ addTextType }}
      </el-button>
    </el-card>
  </div>
</template>

<script>
import AdvertList from './advert-list.vue'
import AdvertPlace from './advert-place.vue'
import AdvertPopup from './advert-popup.vue'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'AdManage',
  components: {
    AdvertList,
    AdvertPlace,
    AdvertPopup
  },
  computed: {
    ...mapState('base', ['tab_key']),
    addTextType() {
      return this.activeName === 'advert' ? '新增广告' : '新增弹窗'
    },
    activeName: {
      get() {
        return this.tab_key ? this.tab_key : 'advert'
      },
      set(val) {
        this.SET_TABS_TYPE({ value: val })
      }
    }
  },
  methods: {
    ...mapMutations('base', ['SET_TABS_TYPE']),
    handleClick({ name }) {
      this.SET_TABS_TYPE({ value: name })
    },
    addClickHandle() {
      this.$router.push({ path: `/operation/advert_manage/add_${this.activeName}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.ad-list-container {
  position: relative;
  &-button {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
</style>
